<template>
  <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      @select="handleSelect"
  >
    <!--logo-->
    <img class="img" src="../assets/logo.png">

    <!--图标-->
    <el-menu-item class="menu l1" index="1">
      <el-icon>
        <home-filled/>
      </el-icon>
      <router-link to="lunbo"> 首页</router-link>
    </el-menu-item>
    <el-menu-item class="menu l2" index="2">
      <el-icon>
        <grid/>
      </el-icon>
      <router-link to="pintu"> 拼图</router-link>
    </el-menu-item>
    <el-menu-item class="menu l3" index="3">
      <el-icon>
        <operation/>
      </el-icon>
      <router-link to="blindbox"> 盲盒</router-link>
    </el-menu-item>
    <el-menu-item class="menu l4" index="4" id="personal">
      <el-icon>
        <user/>
      </el-icon>
      <el-dropdown trigger="click">
        <router-link to="" style="color:white">个人中心</router-link>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item><router-link to="personal"> 个人信息</router-link></el-dropdown-item>
            <el-dropdown-item><router-link to="login">退出登录</router-link></el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </el-menu-item>

    <el-row class="demo-avatar">
      <el-col>
        <div class="demo-basic--circle">
          <div class="block">
            <el-avatar :size="80">
              <el-image :src="userPicture"></el-image>
            </el-avatar>
          </div>
        </div>
      </el-col>
    </el-row>
  </el-menu>

  <div id="middle">
    <router-view/>
  </div>

</template>
<script>
import {User} from '@element-plus/icons-vue'
import {Operation} from '@element-plus/icons-vue'
import {HomeFilled} from '@element-plus/icons-vue'
import {Grid} from '@element-plus/icons-vue'
import storeUtil from '../utils/localstorage'

export default {
  components: {
    user: User,
    operation: Operation,
    homeFilled: HomeFilled,
    grid: Grid
  },
  name: "Index",
  data() {
    return {
      uid: '',
      userPicture: ''
    }
  },

  mounted() {
    this.HeadPicture();
  },

  methods: {
    HeadPicture() {
      this.uid = storeUtil.get("uid");
      this.$axios.get('/user/headpicture', {
        params: {
          id: this.uid
        }
      }).then(data => {
        this.userPicture = data.result.user.headUrl;
        //alert(this.userPicture);

      }).catch(error => {
        console.log(error);
      })
    },
  }
}
</script>

<style scoped>
.demo-avatar {
  margin-left: 6rem;
  margin-top: 2px;
}

.menu {
  margin-left: 20px;
  margin-top: 10px;
}

.l1 {
  margin-left: 45rem;
}

.img {
  width: 80px;
  height: 80px;
  border-radius: 50px;
  margin-top: 2px;
  margin-left: 30px;
}

h3 {
  margin-right: 80rem;
  margin-top: 3rem;
}

p {
  margin-left: -1rem;
  margin-top: 1.5rem;
}

span {
  margin-left: 5px;
}

#personal {
  padding-top: 18px;
  padding-bottom: 18px;
}

</style>